<template>
  <div class="login">
    <p class="title">小红果洗车管理后台(代理端)</p>
    <div class="loginBox">
      <h3 class="login-title">欢迎登录</h3>
      <div class="phone">
        <input type="tel" v-model="phone" placeholder="手机号" maxlength="11">
        <i class="getcode" v-on:click="getCode" v-show="show">{{codeText}}</i>
        <i class="getcode" v-show="!show">{{count}}s</i>
      </div>
      <div class="code">
        <input type="text" v-model="code" placeholder="验证码">
      </div>
      <div class="button" @click="onSubmit()">
        <button>登录</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        phone: '',
        code: '',
        codeText:'获取验证码',
        count:60,//倒计时
        show:true,//倒计时显示
        timer: null,
    }
  },
    methods: {
      //获取验证码
      getCode(){
        if(!this.phone){
          console.log("手机号为空")
        }else{
          this.$axios.post(this.baseURL+'user/getMobileCode',{
            "mobile":this.phone,
            "requestSource":"PC"
          }).then((res)=>{
            console.log(res,"登录资源");
            if(res.data.code == 1){
              var _this = this;
              _this.timer = setInterval(() => {
                if (_this.count > 0) {
                   _this.show = false;
                  _this.count--;
                  console.log( _this.count)
                } else {
                  _this.show = true;
                  _this.codeText ="重新发送";
                  clearInterval(_this.timer);  // 清除定时器
                  _this.timer = null;
                  _this.count = 60;
                }
              }, 1000)
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }
      },
      // 提交登录
      onSubmit() {
        // localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoieHh4eCIsImp0aSI6IiIsInN1YiI6IntcInJvbGVcIjoxMDAsXCJ1c2VySWRcIjo2fSIsImlhdCI6MTYyMjk2NzExNywiZXhwIjoxNjMxOTY3MTE3fQ.Ekm3gQdN7Gv-I-GEdRwcLckj9d6E-qs3-Zrn1KAahYc');//将登录信息放入缓存
        if(!this.phone){
          this.$message.error('请输入手机号');
        }else if(!this.code){
          this.$message.error('请输入验证码');
        }else{
          this.$axios.post(this.baseURL+'user/login',{
            "mobile":this.phone,
            "code":this.code,
            "requestSource":"PC"
          }).then((res)=>{
            console.log(res,"登录资源");
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '登录成功'
              });
              this.$router.push({
                path: '/',
              })
              localStorage.setItem('id', res.data.data.id);//将登录信息放入缓存
              localStorage.setItem('phoneNumber', res.data.data.phoneNumber);//将登录信息放入缓存
              if(res.data.data.token){
              	 localStorage.setItem('token', res.data.data.token);//将登录信息放入缓存
              }else{
              	 localStorage.setItem('token', res.data.data.token);//将登录信息放入缓存
              }
              console.log("写入本地的token ==> "+res.data.data.token);
            }else{
              this.$message({
                type: 'info',
                message: '登录失败'
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }

        /* this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post(this.baseURL+'user/login',{
              "mobile":this.form.mobile,
              "password":this.form.password,
              "requestSource":"PC"
            }).then((res)=>{
              console.log(res,"登录资源");
              if(res.data.code==1){
                this.$message({
                  type: 'success',
                  message: '登录成功'
                });
                this.$router.push({
                  path: '/',
                })
                localStorage.setItem('phoneNumber', res.data.data.userName);//将登录信息放入缓存
                localStorage.setItem('id', res.data.data.id);//将登录信息放入缓存
                if(res.data.data.token){
                	 localStorage.setItem('token', res.data.data.token);//将登录信息放入缓存
                }else{
                	 localStorage.setItem('token', res.data.data.token);//将登录信息放入缓存
                }
                console.log("写入本地的token ==> "+res.data.data.token);
              }else{
                this.$message({
                  type: 'info',
                  message: '登录失败'
                });
                this.$refs[formName].resetFields(); //清空输入框
              }
            }).catch((err)=>{
              console.log('request fail', err);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        }); */
      },
    }
  }
</script>

<style lang="scss" scoped>
  .login{
    width: 100vw;
    height: 100vh;
  }
  .title{
    font-size: 20px;
    text-align: center;
    line-height: 300px;
    background-color: transparent;
  }
  .loginBox{
    border: 1px solid #dcdfe6;
    width: 350px;
    height: 250px;
    margin: 0 auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0 0 25px #909399;
    box-shadow: 0 0 25px #909399;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -210px;
    margin-top: -200px;
    text-align: center;
    .login-title {
      text-align: center;
      margin: 0 auto 40px auto;
      color: #303133;
    }
    .phone,.code,.button{
      width: 90%;
      height: 40px;
      border: #333333 1px solid;
      box-sizing: border-box;
      margin: 0 5%;
      font-size: 14px;
      line-height: 40px;
      background-color: #ffffff;
      border-radius: 5px;
      border-color: #F0F1F6;
      margin-bottom: 22px;
      overflow: hidden;
      position: relative;
      input{
        width: 70%;
        height: 40px;
        border: none;
        outline: none;
        position: absolute;
        left: 0;
        padding-left: 10px;
      }
      .getcode{
        width: 30%;
        height: 40px;
        position: absolute;
        right: 0;
        font-style: normal;
        color: #409eff;
        cursor: pointer;
      }
    }
    .button{
      background-color: #409eff;
      button{
        width: 100%;
        height: 100%;
        background-color: transparent;
        color: #ffffff;
        outline: none;
        border: none;
        cursor: pointer;
      }
    }
  }
</style>
